import React, { useState } from 'react';
import BreadCrumb from '@/components/BreadCrumb';
import s from './style.module.css';
import Chart1 from './echartBox/chart1';
import Chart2 from './echartBox/chart2';
import BugTable from './bugTable';
import { datetime } from '../../common/formatter';
import { vulVst } from '~/API';


export default function bugStore() {
  const [date, setDate] = useState();

  React.useMemo(async () => {
    const time = await vulVst();
    let date_ = '--';
    if (time.data?.updated_at) {
      date_ = datetime(time.data.updated_at);
    }
    setDate(date_);
  }, []);
  return (
    <>
      <BreadCrumb arr={[{ link: '', name: '漏洞库' , active: true }]} />
      <div className={s.main}>
        <div className={s.chartBox}>
          <div className={s.chartHead}>
            <span className={s.chartHead1}>漏洞概览</span>
            <span className={s.chartHead2}>{date}</span>
          </div>
          <div className={s.chart}>
            <Chart1 />
            <Chart2 />
          </div>
        </div>
        <div className={s.tableBox}>
          <div className={s.chartHead}>
            <span className={s.chartHead1}>漏洞列表</span>
          </div>
          <BugTable />
        </div>
      </div>
    </>
  );
}
